<style type="text/css">
	.mybtn{
		color: aliceblue;
		border-radius:5px;
		background-color: rgba(0, 127, 203, 1.0);
		border: 1px solid rgb(0, 145, 214);
	}  
	.post{
		border-radius: 8px;
		border: 1px solid rgba(0, 0, 0,0.2);
	}
	.myinput{
		width: 70%;
	}
	.coninput{
		width: 70%;
		border: 1px solid rgba(0, 30, 225, 0.2);
		border-radius: 5px;
	/* 	background-color: ; */
	}

</style>
<script>
	$(document).ready(function() {  
	    $('.coninput').on('click', function() {  
	     $(this).css('border-color', 'skyblue'); /* 设置输入框边框颜色为蓝色 */  
			 // $(this).off('mouseenter mouseleave'); // 移除鼠标进入和离开的事件监听器  
			 //        $(this).css('border-color', 'deepskyblue'); // 清除边框颜色  
	    });  
		 $('.coninput').on('mouseleave', function() {  
		        $(this).css('border-color', 'deepskyblue'); /* 恢复默认边框颜色 */  
		    });  
	});  
		
	
</script>
{% for c in clist %}

	<div class="post">
	<!-- <input type="hidden" value="{{c.cid}}"> -->
	<br/>
	                      <div class="user-block">
	                        <img class="img-circle img-bordered-sm" src="http://127.0.0.1:5001/showprofileimg={{c.uname}}" alt="user image">
	                        <span class="username">
	                          <a href="/userCenter?name={{c.uname}}">{{c.uname}}</a>
				{% if name==c.uname %}			  
	      <a href="/delcontextc/{{c.cid}}/{{c.conimg}}" class="float-right btn-tool" onclick="return confirm('你确定删除吗？')"><i class="fas fa-times"></i></a><!-- 跟删除有关的 -->
		  <button data-modal-action="open{{c.cid}}" data-modal-target="myModal{{c.cid}}" class="mybtn" onclick="getbasicimg{{c.cid}}()">编辑说说</button>
		  {% endif %}
	                        </span>
	                        <span class="description">发布于 - {{c.contime}} </span>
	                      </div>
	                      <!-- /.user-block -->
	                      <p>
	                       {{c.context}}
	                      </p>
						  {% if c.conimg != None%}
	                    <p>
							<img src="static/images/context/{{c.conimg}}" alt="没有提供图片" height="200px" width="400px">
						</p>
						{% endif%}
	                      <p>
	                        <a href="#" class="link-black text-sm mr-2"><i class="fas fa-share mr-1"></i> 分享</a>
	                        <a href="#" class="link-black text-sm"><i class="far fa-thumbs-up mr-1"></i> 点赞</a>
	                        <span class="float-right">
	                          <a href="#" class="link-black text-sm">
	                            <i class="far fa-comments mr-1"></i> 评论
	                          </a>
	                        </span>
	                      </p>
						  <form action="/addcomment?name={{name}}" method="POST">
							  <input type="hidden" name='commet_cid' value="{{c.cid}}">
							  <input type="hidden" name='commentname' value="{{name}}">
	                   <p><input class="coninput" type="text" placeholder="输入评论" name="comment">
						  <button type="submit" class="mybtn" >发送</button>
					    </p>
						</form>
						<p>
							{% set commentel =  c.cid | querysomec %}
							{% if commentel != [] %}
							{% for ci in commentel %}
							
				<label for="">{{ci.commitname}}:</label>	{{ci.comment}} 
{% if name==ci.commitname %} <a href="/delcomment/{{ci.id}}" class="float-right btn-tool" onclick="return confirm('你确定删除吗？')"><i class="fas fa-times"></i></a><!-- 跟删除有关的 -->
							{% endif %}
							<br>
							{% endfor %}
							{% endif %}
						</p>
	                    </div>	
							
						
		<!-- 模态框部分 修改 -->
		<!-- 模态框部分 -->
	<style>
		/*模态框主体样式*/
		  .modal{{c.cid}} {
			
		      display: none;
		      position: fixed;
		      z-index: 1;
		      left: 0;
		      top: 0;
		      width: 100%;
		      height: 100%;
		      overflow: auto;
		      background-color: rgba(0, 0, 0, 0.5);
		  }
		
		  /*模态框公共样式*/
		  .modal-content{{c.cid}} {
						border-radius: 10px;	
		      background-color: #fefefe;
		      margin: 50px auto 0;
		      padding: 20px;
		      border: 1px solid #888;
		      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
		      animation: modal-show 0.3s;
		  }
		
		  /* 正常大小 */
		  .modal-normal{{c.cid}} {
		      width: 600px;
		  }
		
		
		  /* 隐藏 */
		  .modal-hide{{c.cid}} {
		      animation: modal-hide{{c.cid}} 0.3s;
		  }
		
		  /* 展示动画 */
		  @keyframes modal-show{{c.cid}} {
		      from {
		          opacity: 0;
		          transform: translateY(-50px);
		      }
		      to {
		          opacity: 1;
		          transform: translateY(0);
		      }
		  }
		
		  /* 隐藏动画 */
		  @keyframes modal-hide{{c.cid}} {
		      from {
		          opacity: 1;
		          transform: translateY(0);
		      }
		      to {
		          opacity: 0;
		          transform: translateY(-50px);
		      }
		  }
		
		  /*关闭按钮*/
		  .close{{c.cid}}{
		      color: #aaa;
		      float: right;
		      font-size: 28px;
		      font-weight: bold;
		      cursor: pointer;
		      -webkit-tap-highlight-color: rgba(255,0,0,0);
		  }
		
		  /*关闭按钮的鼠标点击和经过样式*/
		  .close{{c.cid}}:hover,
		  .close{{c.cid}}:focus {
		      color: black;
		      text-decoration: none;
		      cursor: pointer;
		      -webkit-tap-highlight-color: rgba(255,0,0,0);
		  }
	</style>
		<div id="myModal{{c.cid}}" class="modal{{c.cid}}">
		        <div class="modal-content{{c.cid}} modal-normal{{c.cid}}">
		            <span class="close{{c.cid}}">&times;</span>
		            <h3 align="center">修改说说</h3>
		           <form class="form-horizontal" method="post" action="/editcontextc?name={{name}}" enctype="multipart/form-data">
		   <input type="hidden" value="{{c.cid}}" name="conid">
		               <div class="form-group row">
		                 <label for="inputExperience" class="col-sm-2 col-form-label">说说内容</label>
		                 <div class="col-sm-10">
		                   <textarea class="form-control" id="updateinput{{c.cid}}" name="edit_context" placeholder="请在里面修改"></textarea>			   
				  <script>
					   $("#updateinput{{c.cid}}").val('{{c.context}}')
					   
				   </script>
		                 </div>		
		               </div>
		
		               <div class="form-group row">
						     <div class="form-group">
						                     <div class="btn btn-default btn-file">
						                       <i class="fas fa-paperclip"></i> 添加附件
						                       <input name="alterfile{{c.cid}}" type="file" onchange="showImg{{c.cid}}(this)" >
						                     </div>
						                     <p class="help-block">不超过:20MB</p>
						                   </div>
								   <div id="imgContainer{{c.cid}}" style="margin-top: 10px;"></div>
		                 <div class="offset-sm-2 col-sm-10">
		                   <button type="submit" class="btn btn-success">修改</button>
						     <button type="reset" class="btn btn-success" onclick="clearimg{{c.cid}}()">重置</button>
		                 </div>
		               </div>
					   <script type="text/javascript">
					     function showImg{{c.cid}}(obj) {
					       var files = obj.files
					       document.getElementById("imgContainer{{c.cid}}").innerHTML = getImgsByUrl{{c.cid}}(files)
					       // getImgsByFileReader(document.getElementById("imgContainer"), files)
					     }
					   
					     // 使用window.URL.createObjectURL(file)读取file实例并显示图片
					     function getImgsByUrl{{c.cid}}(files) {
					       var elements = ''
					       for (var i = 0; i < files.length; i++) {
					         var url = window.URL.createObjectURL(files[i])
					         elements += "<img src='" + url + "' style='width: 40%;' id='alter{{c.cid}}'/>"
					       }
					       return elements
					     }
						 //重置图片
						 function clearimg{{c.cid}}(){
							  try{
							var file=document.getElementById('alter{{c.cid}}');
							    file.remove();
							}catch(err){
								
							}
						 }
					   </script>
		             </form>	
					
		        </div>
				<script>
					//console.log("用到了")
					// 获取触发模态框的自定义属性 2
					       var modalButtons{{c.cid}} = document.querySelectorAll("[data-modal-action]");
					
					       // 获取模态框主体
					       var modals{{c.cid}} = document.querySelectorAll(".modal{{c.cid}}");
					
					       // 监听模态框的按钮事件
					       modalButtons{{c.cid}}.forEach(function(button) {
					           button.addEventListener("click", function() {
					               var targetId = this.dataset.modalTarget;
					               var targetModal = document.getElementById(targetId);
					
					               if (targetModal) {
					                   var action = this.dataset.modalAction;
					
					                   if (action === "open{{c.cid}}") {
											// console.log("有执行open")
					                       openModal{{c.cid}}(targetModal);
					                   } else if (action === "close{{c.cid}}") {
											// console.log("有执行close")
										
					                       closeModal{{c.cid}}(targetModal);
					                   }
					               }
					           });
					       });
					       // 打开模态框
					       function openModal{{c.cid}}(modal) {
					           modal.style.display = "block";
					           modal.querySelector(".modal-content{{c.cid}}").classList.remove("modal-hide{{c.cid}}");
					       }
					       // 关闭模态框
					       function closeModal{{c.cid}}(modal) {
					           modal.querySelector(".modal-content{{c.cid}}").classList.add("modal-hide{{c.cid}}");
					           modal.querySelector(".modal-content{{c.cid}}").addEventListener("animationend", function () {
					               modal.style.display = "none";
					           }, { once: true });
					       }
					       // 监听模态框的关闭时事件
					       modals{{c.cid}}.forEach(function(modal) {
					           var closeButton = modal.querySelector(".close{{c.cid}}");
					           if (closeButton) {
					               closeButton.addEventListener("click", function() {
					                   var targetModal = this.closest(".modal{{c.cid}}");
					                   closeModal{{c.cid}}(targetModal);
					               });
					           }
					       });
					       // 当用户点击模态框外部时，关闭模态框
					       // window.onclick = function (event) {
					       //     modals{{c.cid}}.forEach(function(modal) {
					       //         if (event.target === modal) {
					       //             closeModal{{c.cid}}(modal);
					       //         }
					       //     });
					       // };
						   window.addEventListener('click', function(event) {
						        modals{{c.cid}}.forEach(function(modal) {
						            if (event.target === modal) {
						                closeModal{{c.cid}}(modal);
						            }
						        });
						      });
				</script>
				<!-- 传输图片部分 -->
				<script>
					// function imghidden{{c.cid}}(){
					   // 	document.querySelectorAll('.imgshow{{c.cid}}').forEach(el=>{
					   // 	el.style.display='none'
					   // 	})
					   	
					   // }	
						function getbasicimg{{c.cid}}(){
							
							var alterfile{{c.cid}}=document.getElementById('alterfile{{c.cid}}');
									var url = 'static/images/context/{{c.conimg}}'					
									document.getElementById("imgContainer{{c.cid}}").innerHTML = "<img src='" + url + "' style='width: 40%;' id='alter{{c.cid}}'/>"
									
						}	 
						// getbasicimg{{c.cid}}()
							 
					 function showImg{{c.cid}}(obj){
					   var files = obj.files
					   document.getElementById("imgContainer{{c.cid}}").innerHTML = getImgsByUrl{{c.cid}}(files)
					 }
										   
					 // 使用window.URL.createObjectURL(file)读取file实例并显示图片
					 function getImgsByUrl{{c.cid}}(files) {
						 // console.log(files)
					   var elements = ''
					   for (var i = 0; i < files.length; i++) {
					     var url = window.URL.createObjectURL(files[i])
					     elements += "<img src='" + url + "' style='width: 40%;' id='alter{{c.cid}}'/>"
					   }
					   return elements
					 }
					 //重置图片
					 function clearimg{{c.cid}}(){
						 try{var file=document.getElementById('alter{{c.cid}}');
						file.remove();
						 }catch(e){
						 	//TODO handle the exception
						 }
					
					 }
				</script>
		    </div><!-- 模态框部分 -->
			<br />
		{% endfor%}			   